<!-- detail.html -->
<div class="container mt-3">
    <div class="card">
        <div class="card-header">
            <h4>${stock.name} (${stock.code})</h4>
        </div>
        <div class="card-body">
            <ul class="nav nav-tabs" id="stockTab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="realtime-tab" data-toggle="tab" href="#realtime">分时线</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="daily-tab" data-toggle="tab" href="#daily">日线</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="info-tab" data-toggle="tab" href="#info">基本信息</a>
                </li>
            </ul>

            <div class="tab-content mt-3" id="stockTabContent">
                <div class="tab-pane fade show active" id="realtime" role="tabpanel">
                    <div id="realtimeChart" style="height: 400px;"></div>
                </div>
                <div class="tab-pane fade" id="daily" role="tabpanel">
                    <div id="dailyChart" style="height: 400px;"></div>
                </div>
                <div class="tab-pane fade" id="info" role="tabpanel">
                    <table class="table table-bordered">
                        <tr><th>当前价</th><td>${stock.price}</td></tr>
                        <tr><th>涨跌幅</th><td>${stock.changePercent}%</td></tr>
                        <tr><th>最高价</th><td>${stock.high}</td></tr>
                        <tr><th>最低价</th><td>${stock.low}</td></tr>
                        <tr><th>成交量</th><td>${stock.volume}</td></tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 引入ECharts -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script>
<script>
    $(function() {
        // 初始化分时图
        let realtimeChart = echarts.init(document.getElementById('realtimeChart'));
        $.get('/stock/getChartData?code=${stock.code}&type=realtime', function(res) {
            let option = {
                title: { text: '分时线' },
                tooltip: { trigger: 'axis' },
                xAxis: {
                    type: 'category',
                    data: res.data.times
                },
                yAxis: { type: 'value' },
                series: [{
                    data: res.data.prices,
                    type: 'line',
                    smooth: true
                }]
            };
            realtimeChart.setOption(option);
        });

        // 初始化日线图
        let dailyChart = echarts.init(document.getElementById('dailyChart'));
        $.get('/stock/getChartData?code=${stock.code}&type=daily', function(res) {
            let option = {
                title: { text: '日K线' },
                tooltip: { trigger: 'axis' },
                xAxis: {
                    type: 'category',
                    data: res.data.dates
                },
                yAxis: { type: 'value' },
                series: [{
                    type: 'candlestick',
                    data: res.data.kLines
                }]
            };
            dailyChart.setOption(option);
        });

        // 窗口大小变化时重新调整图表大小
        window.addEventListener('resize', function() {
            realtimeChart.resize();
            dailyChart.resize();
        });
    });
</script>